<template>
  <div class="project-home-container">
    <div class="project-home-header">
      <div class="header-left">
        <img :src="systemLogo" alt="logo" />
        <span class="system-title">欢迎登录 {{ systemName }}</span>
      </div>
      <div class="header-right">
        <div class="item-operate" v-if="userAccount == 'projectListPage'">
          <a-tooltip title="进入系统" placement="bottom">
            <span @click="handleSystem()">
              <icon-fonts icon="icon-jinruxitong" class="icon"></icon-fonts>
              <span class="text">系统</span>
            </span>
          </a-tooltip>
        </div>
        <div class="item-operate">
          <a-tooltip title="操作手册" placement="bottom">
            <span @click="handleDownload()">
              <icon-fonts icon="icon-caozuoshouce" class="icon"></icon-fonts>
              <span class="text">手册</span>
            </span>
          </a-tooltip>
        </div>
        <div class="item-operate">
          <a-tooltip
            :title="$ct('MessageNotification', '消息通知')"
            placement="bottom"
          >
            <header-notice
              ref="headerNotice"
              @click.native="() => ($refs.headerNotice.show = true)"
            />
          </a-tooltip>
        </div>
        <div class="item-operate">
          <header-avatar />
        </div>
      </div>
    </div>
    <!-- :class="[activeIndex == 1 && 'm-b-0']"  -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <a-input
            style="width:360px"
            placeholder="请输入项目名称"
            v-model="condition.proName"
          ></a-input>
        </template>
        <template slot="operate">
          <a-button class="cu-btn-primary" icon="search" @click="search()">
            查询
          </a-button>
          <a-button class="cu-btn-filter" icon="reload" @click="reset()">
            重置
          </a-button>
          <!-- <div class="near-container">
            <div
              class="item"
              :class="[activeIndex == 0 && 'active']"
              @click="handleActivePage(0)"
            >
              项目列表
            </div>
            <div class="sep-line">|</div>
            <div
              class="item"
              :class="[activeIndex == 1 && 'active']"
              @click="handleActivePage(1)"
            >
              项目地图
            </div>
          </div> -->
        </template>
      </ScreenConditions>
    </div>
    <!--  -->
    <div class="project-home-body">
      <div
        class="project-btn-groups"
        :class="[projectDrawer.visible && 'appear']"
      >
        <div>
          <a-button
            :type="buttonIndex == 1 ? 'primary' : ''"
            @click="handleViewType(1)"
          >
            最近查看项目({{ projectCount.zjCount || 0 }}个)
          </a-button>
          <a-button
            :type="buttonIndex == 0 ? 'primary' : ''"
            @click="handleViewType(0)"
          >
            全部项目({{ projectCount.allCount || 0 }}个)
          </a-button>
        </div>
        <a-select
          style="width: 200px"
          placeholder="请选择项目状态"
          allowClear
          showSearch
          v-model="condition.proStatus"
          @change="search()"
        >
          <a-select-option
            :value="item.dicItemCode"
            v-for="(item, index) in proStatusSource"
            :key="index"
          >
            {{ item.dicItemName }}
          </a-select-option>
        </a-select>
      </div>
      <!-- 项目列表 -->
      <template v-if="activeIndex == 0">
        <div
          class="project-list-container"
          :class="[projectDrawer.visible && 'appear']"
        >
          <div
            class="loader"
            :class="[projectDrawer.visible && 'left-shift']"
            v-if="loading"
          >
            <a-spin />
          </div>
          <a-empty :image="simpleImage" v-if="tableData.length == 0" />
          <a-row :gutter="[24, 24]" v-else>
            <a-col
              :xs="24"
              :sm="24"
              :md="12"
              :lg="12"
              :xl="8"
              :xxl="6"
              :xxxl="6"
              v-for="(item, index) in tableData"
              :key="index"
            >
              <div class="project-card" @click="handleActive(item)">
                <div
                  class="state"
                  :class="[filterStateClass(item.proStatus)]"
                  v-if="item.proStatus"
                >
                  {{ item.proStatusDesc || "-" }}
                </div>
                <div class="bg">
                  <img
                    v-if="getUrl(item.proImage)"
                    :src="getUrl(item.proImage)"
                  />
                  <div v-else class="warp"></div>
                </div>
                <div class="content">
                  <div class="name">
                    <a-tooltip>
                      <template slot="title">
                        {{ item.proName }}
                      </template>
                      {{ item.proName }}
                    </a-tooltip>
                  </div>
                  <div class="people">
                    <icon-fonts icon="icon-renyuan" />
                    负责人： {{ item.contacts || "-" }}
                  </div>
                  <div class="amount">
                    <icon-fonts icon="icon-touzi" />
                    投资额：{{
                      Number(item.roadMoney || 0).toLocaleString()
                    }}万元
                  </div>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
        <!-- 分页 -->
        <div
          class="project-home-page"
          :class="[projectDrawer.visible && 'appear']"
        >
          <vxe-pager
            size="small"
            background
            :current-page.sync="pager.page"
            :page-size.sync="pager.pageSize"
            :total="pager.total"
            :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
            :page-sizes="[8, 16, 32, 80]"
            @page-change="paginationChange"
          >
            <template #left>
              <div class="vxe-pager-left-tip-container">
                共<span>{{ pager.total }}</span
                >条
              </div>
            </template>
          </vxe-pager>
        </div>
      </template>
      <!-- 项目地图 -->
      <div v-if="activeIndex == 1" class="project-map-container">
        <div id="map-container"></div>
      </div>
      <!-- 项目抽屉 -->
      <projectDrawer
        :visible.sync="projectDrawer.visible"
        @changeSelect="handleSelect($event)"
      ></projectDrawer>
      <div
        class="open"
        :class="[projectDrawer.visible && 'vanish']"
        @click="handleOpenDrawer()"
      >
        <icon-fonts icon="icon-zhankaishouqi"></icon-fonts>
      </div>
    </div>
  </div>
</template>

<script>
import { Empty } from "ant-design-vue";
import { mapGetters } from "vuex";
import { axios } from "@/utils/request";
import ScreenConditions from "@/components/extendCustom/ScreenConditions";
import { getListProject } from "@/services/user.js";
//头像
import HeaderAvatar from "@/layouts/header/HeaderAvatar";
//消息通知
import HeaderNotice from "@/layouts/header/HeaderNotice";
import { flatTreeData } from "@/utils/util.js";
//项目抽屉
import projectDrawer from "./components/projectDrawer.vue";
//高德地图
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "ecfcb87ee130b34b5f0d25862f5ef080",
};
let mapInstance = null;
let mapModule = null;
export default {
  components: {
    ScreenConditions,
    HeaderAvatar,
    projectDrawer,
    HeaderNotice,
  },
  data() {
    return {
      activeIndex: 0,
      condition: {
        //项目名称
        proName: "",
        //项目id
        parentOrgId: "",
        //项目状态
        proStatus: undefined,
      },
      //列表
      loading: true,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 8,
        total: 0,
      },
      currentProject: {},
      projectCount: {},
      //项目抽屉
      projectDrawer: {
        visible: true,
      },
      //
      buttonIndex: 1,
      //项目状态
      proStatusSource: [],
    };
  },
  computed: {
    ...mapGetters([
      "menuData",
      "configData",
      "nickname",
      "systemName",
      "userAccount",
      "tenantData",
    ]),
    systemLogo() {
      let index = this.configData.findIndex(
        (item) => item.code === "systemLogo"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "";
      }
    },
    systemName() {
      let index = this.configData.findIndex(
        (item) => item.code === "systemName"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "低代码开发平台";
      }
    },
  },
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
  },
  mounted() {
    this.resetData();
    this.getDicCodeData();
  },
  methods: {
    //查询字典表
    getDicCodeData() {
      return new Promise((resolve, reject) => {
        this.$post("/system/dicSet/getDicItemByCodeAndTenantCode", {
          code: "proStatus",
        })
          .then((res) => {
            let { data } = res;
            this.proStatusSource = data;
            resolve();
          })
          .catch((_) => {
            this.proStatusSource = [];
            reject();
          })
          .finally((_) => {});
      });
    },

    filterStateClass(val) {
      switch (val) {
        case "0":
          return "bg_0";
        case "1":
          return "bg_1";
        case "2":
          return "bg_2";
        case "3":
          return "bg_3";
        case "4":
          return "bg_4";
        case "5":
          return "bg_5";
        default:
          break;
      }
    },

    //初始化项目
    handleSelect(ev) {
      this.currentProject = ev;
      this.condition.parentOrgId = ev.id;
      this.getProjectCount();
      this.getTableData().then(() => {
        if (this.activeIndex == 1) {
          mapInstance.clearMap();
          //加载地图图标
          this.projectLocation();
        }
      });
    },

    //页面切换
    handleActivePage(index) {
      this.activeIndex = index;
      if (this.activeIndex == 1) {
        this.$nextTick(() => {
          this.initMap();
        });
      } else {
        this.mapDestroy();
      }
    },

    //最近项目切换
    handleViewType(index) {
      this.buttonIndex = index;
      this.getTableData().then(() => {
        if (this.activeIndex == 1) {
          mapInstance.clearMap();
          //加载地图图标
          this.projectLocation();
        }
      });
    },

    //打开抽屉
    handleOpenDrawer() {
      this.projectDrawer.visible = true;
    },

    //记录最近查看项目
    getProjectCount() {
      let { parentOrgId, proName } = this.condition;
      axios
        .post(
          `/mdata/sysProject/getProListByQXCount`,
          {
            parentOrgId,
            proName,
          },
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          let { data } = res || {};
          this.projectCount = {
            allCount: data?.allCount || 0,
            zjCount: data?.zjCount || 0,
          };
        })
        .catch((_) => {
          this.projectCount = {};
        })
        .finally((_) => {});
    },

    resetData() {
      localStorage.setItem("TO_XMDP", JSON.stringify(false));
      localStorage.setItem("CURRENT_PROJECT", JSON.stringify({}));
      localStorage.setItem("CURRENT_PROJECT_CODE", "");
      this.$store.dispatch("setStoreState", {
        CURRENT_PROJECT: {},
      });
      this.$store.dispatch("setStoreState", {
        CURRENT_PROJECT_CODE: "",
      });
    },

    //刷新权限/菜单数据
    async refreshPermission(data = {}, toXmdp) {
      let { proCode, orgCode } = data;
      //缓存所选项目
      localStorage.setItem("CURRENT_PROJECT", JSON.stringify(data));
      localStorage.setItem("CURRENT_PROJECT_CODE", proCode || orgCode);
      this.$store.dispatch("setStoreState", {
        CURRENT_PROJECT: data,
      });
      this.$store.dispatch("setStoreState", {
        CURRENT_PROJECT_CODE: proCode || orgCode,
      });
      //
      await this.$store.dispatch("getPermissionIdentifyingByRoleId");
      await this.$store
        .dispatch("getUserInForAndButtonPermissions")
        .then(async (res) => {
          const roles = res && res.role;
          //菜单信息
          let menuSource = await this.$store.dispatch("GenerateRoutes", {
            roles,
          });

          //首页信息
          let portalSource = JSON.parse(
            localStorage.getItem("PORTAL_ROUTERS_DATA" ?? "[]")
          );

          //默认获取一级节点菜单
          let flatMenu = flatTreeData(menuSource, "children");
          let firstMenu = flatMenu.find(
            (v) => !v.children || v.children.length == 0
          );

          //是否有大屏权限
          if (toXmdp) {
            //进入大屏
            this.$router.push({
              path: `/largeScreen`,
            });
          } else {
            //没有首页，有菜单
            if (portalSource.length == 0 && menuSource.length != 1) {
              this.$router.push({
                path: firstMenu.fullPath,
              });
            }
            //没有首页，没有菜单
            else if (portalSource.length == 0 && menuSource.length == 1) {
              this.$router.push({
                path: `/whitePage/index`,
              });
            }
            //有首页，有菜单
            else {
              this.$router.push({
                path: "/system/portal/index",
              });
            }
          }
        });
    },

    //进入系统
    async handleSystem() {
      await this.refreshPermission(this.currentProject, false);
    },

    //操作手册
    handleDownload() {
      window.open(
        "https://dpmp.jkec.info/docs/数字项目管理平台用户操作手册.pdf"
      );
    },

    //选择项目
    async handleActive(item) {
      let { proCode, toXmdp } = item;
      //
      localStorage.setItem("TO_XMDP", JSON.stringify(toXmdp));
      //
      await this.refreshPermission(item, toXmdp);
      //设置最近查看项目
      await this.getRecentlyProject(proCode);
    },

    //设置最近查看项目
    getRecentlyProject(proCode) {
      axios
        .post(
          `/mdata/sysProject/projectVisitSet`,
          {
            proCode,
          },
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {})
        .catch((_) => {})
        .finally((_) => {});
    },

    // //查询大屏id
    // getScreenId(proCode) {
    //   let user_info = JSON.parse(localStorage.getItem("USER_INFO") ?? "{}");
    //   axios
    //     .post(
    //       `/report/reportVisual/queryEnabledByTenantUuid`,
    //       {
    //         tenantUuid: proCode,
    //         userId: user_info.uuid,
    //       },
    //       {
    //         headers: {
    //           "Content-Type": "application/json",
    //         },
    //       }
    //     )
    //     .then((res) => {
    //       let { data } = res;
    //       let { uuid } = data;
    //       if (uuid) {
    //         //进入大屏
    //         this.$router.push({
    //           path: `/largeScreen?uuid=${uuid}&proCode=${proCode}`,
    //         });
    //       } else {
    //         //进入系统
    //         this.$router.push({
    //           path: `/system/portal/index`,
    //         });
    //       }
    //     })
    //     .catch((_) => {
    //       //进入系统
    //       this.$router.push({
    //         path: `/system/portal/index`,
    //       });
    //     });
    // },

    getUrl(data = "[]") {
      return JSON.parse(data)?.[0]?.url ?? "";
    },

    search() {
      this.pager.page = 1;
      this.getTableData();
      this.getProjectCount();
    },

    reset() {
      this.condition.proName = "";
      this.search();
    },

    getTableData() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        let { page, pageSize } = this.pager;
        let { proName = "", parentOrgId = "", proStatus = "" } = this.condition;
        getListProject({
          page,
          pageSize,
          proName,
          proId: "",
          parentOrgId,
          viewType: this.buttonIndex,
          proStatus,
        })
          .then((res) => {
            let { data } = res;
            this.tableData = data?.rows ?? [];
            this.pager.total = data?.totalCount ?? 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },

    //地图初始化
    initMap(geox = 121.47, geoy = 31.23) {
      AMapLoader.load({
        key: "4a9b32384ac2ef8437f61e2357874137", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.Scale",
          "AMap.ToolBar",
          "AMap.ControlBar",
          "AMap.MouseTool",
          "AMap.MapType",
          "AMap.HawkEye",
          "AMap.Geolocation",
          "AMap.Geocoder",
          "AMap.PlaceSearch",
          "AMap.AutoComplete",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          mapModule = AMap;
          mapInstance = new AMap.Map("map-container", {
            zoom: 15, //初始化地图级别
            center: [geox, geoy],
            resizeEnable: true,
          });
          mapInstance.on("complete", () => {
            this.projectLocation();
          });
        })
        .catch((_) => {});
    },

    //渲染项目位置
    projectLocation() {
      this.tableData.forEach((item) => {
        let { areaCode, address } = item;
        if (areaCode || address) {
          let str = areaCode.replace(/@/g, "") + address;
          this.geocodeAddress(str, item);
        }
      });
    },

    //根据地址查询经纬度
    geocodeAddress(address, item) {
      var that = this;
      var placeSearch = new mapModule.PlaceSearch({
        city: "全国",
        autoFitView: true,
      });
      placeSearch.search(address, (status, result) => {
        if (status == "complete" && result.info === "OK") {
          if (result.poiList.pois.length == 0) {
            return;
          }
          that.addMapMarker(result.poiList.pois[0].location, item);
          mapInstance.setFitView();
          // let lng = result.poiList.pois[0].location.lng;
          // let lat = result.poiList.pois[0].location.lat;
          // console.log("经度:", lng, "纬度:", lat);
        }
      });
    },

    //添加自定义点标记
    addMapMarker(LngLat, item = {}) {
      let { proName } = item;
      let icon = require("@/assets/img/icon_27.png");
      let marker = new mapModule.Marker({
        position: LngLat,
        // Marker图片路径
        icon,
        // Marker图片大小
        size: new mapModule.Size(68, 72),
        // Marker图片偏移量
        // offset: new AMap.Pixel(-20, 0),
      });
      mapInstance.add(marker);
      marker.setLabel({
        offset: new mapModule.Pixel(0, 10), //设置文本标注偏移量
        //设置文本标注内容
        content: "<div class='marker-label'>" + proName + "</div>",
        //设置文本标注方位
        direction: "top",
      });
      //图标点击事件
      marker.on("click", (e) => {
        //进入系统
        this.handleActive(item);
      });
    },

    //销毁地图
    mapDestroy() {
      mapInstance && mapInstance.destroy();
      mapInstance = null;
    },
  },
  destroy() {
    this.mapDestroy();
  },
};
</script>

<style lang="less" scoped>
.project-home-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .project-home-header {
    height: 54px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ededed;
    padding: 0 40px 0 0;
    box-sizing: border-box;
    .header-left {
      display: flex;
      align-items: center;
      img {
        width: 80px;
        height: 50px;
        object-fit: contain;
      }
      .system-title {
        font-weight: bold;
        font-size: 16px;
        color: #333;
      }
    }
    .header-right {
      display: flex;
      align-items: center;
      .item-operate {
        cursor: pointer;
        padding: 0 12px;
        display: flex;
        align-items: center;
        position: relative;
        .icon {
          font-size: 16px;
          color: #1890ff;
        }
        .text {
          margin-left: 6px;
          font-size: 14px;
          color: #666666;
        }
        &::after {
          content: "";
          width: 1px;
          height: 16px;
          background: #dcdee2;
          border-radius: 4px 4px 4px 4px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 0;
        }
        &:nth-last-child(1) {
          &::after {
            display: none;
          }
        }
      }
    }
  }
  .screen-conditions-container {
    margin-bottom: 16px;
    .conditions-screening-container {
      padding: 10px 24px 0 24px;
      .near-container {
        position: absolute;
        right: 40px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 14px;
        color: #8a9295;
        .sep-line {
          margin: 0 10px;
        }
        .item {
          cursor: pointer;
          position: relative;
          &.active {
            color: #1890ff;
            &::before {
              content: "";
              width: 20px;
              height: 2px;
              background: #1890ff;
              position: absolute;
              bottom: -14px;
              left: 50%;
              transform: translateX(-50%);
            }
          }
        }
        /deep/.anticon {
          font-size: 16px;
          margin-right: 8px;
          position: relative;
          top: 1px;
        }
      }
    }
    &.m-b-0 {
      margin-bottom: 0;
    }
  }
  .project-home-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    .open {
      width: 20px;
      height: 32px;
      position: absolute;
      background: #ffffff;
      top: 0;
      left: 0;
      border-radius: 0 4px 4px 0;
      border: 1px solid #dcdee2;
      border-left: 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 99;
      /deep/.anticon {
        color: #8c8c8c;
        font-size: 15px;
        transform: rotate(180deg);
      }
      &.vanish {
        left: -100%;
      }
    }
    .project-btn-groups {
      z-index: 9;
      padding: 0 170px 0 170px;
      box-sizing: border-box;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /deep/.ant-btn {
        margin-right: 10px;
      }
    }
    .project-list-container {
      flex: 1;
      overflow: auto;
      overflow-x: hidden;
      position: relative;
      padding: 0 170px 0 170px;
      box-sizing: border-box;
      .project-card {
        width: 100%;
        height: 324px;
        background: #ffffff;
        border-radius: 4px 4px 4px 4px;
        display: flex;
        flex-direction: column;
        box-shadow: 0px 4px 16px 0px rgba(102, 102, 102, 0.1);
        .state {
          width: 88px;
          height: 26px;
          position: absolute;
          right: 12px;
          top: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          &.bg_0 {
            background: url(~@/assets/img/icon_28.png);
            background-size: 100% 100%;
          }
          &.bg_1 {
            background: url(~@/assets/img/icon_29.png);
            background-size: 100% 100%;
          }
          &.bg_2 {
            background: url(~@/assets/img/icon_30.png);
            background-size: 100% 100%;
          }
          &.bg_3 {
            background: url(~@/assets/img/icon_31.png);
            background-size: 100% 100%;
          }
          &.bg_4 {
            background: url(~@/assets/img/icon_32.png);
            background-size: 100% 100%;
          }
          &.bg_5 {
            background: url(~@/assets/img/icon_33.png);
            background-size: 100% 100%;
          }
        }
        .bg {
          height: 200px;
          width: 100%;
          img {
            border-radius: 4px 4px 0 0;
            height: 100%;
            width: 100%;
            object-fit: cover;
          }
          .warp {
            border-radius: 4px 4px 0 0;
            height: 100%;
            width: 100%;
            background: url(~@/assets/img/home/project.png);
            background-size: 100% 100%;
          }
        }
        .content {
          flex: 1;
          padding: 20px 16px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .name {
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            // 设置两行文字溢出
            -webkit-line-clamp: 2;
            /** 对象作为伸缩盒子模型显示 **/
            display: -webkit-box;
            /** 设置或检索伸缩盒对象的子元素的排列方式 **/
            -webkit-box-orient: vertical;
            /** 隐藏超出的内容 **/
            overflow: hidden;
          }
          .people,
          .amount {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            overflow: hidden;
            white-space: nowrap;
          }
          .people {
            /deep/.anticon {
              color: #80e0db;
              position: relative;
              top: -1px;
            }
          }
          .amount {
            /deep/.anticon {
              color: #f07f17;
              position: relative;
              top: -1px;
            }
          }

          .introduce {
            font-weight: 400;
            font-size: 14px;
            color: #8a8a8c;
            display: flex;
            justify-content: space-between;
          }
          /deep/.anticon {
            margin-right: 8px;
          }
        }
        &:hover {
          box-shadow: 0px 6px 16px 0px rgba(24, 144, 255, 0.2);
          border-radius: 6px 6px 6px 6px;
          border: 1px solid rgba(24, 144, 255, 0.4);
          cursor: pointer;
          .content {
            .name {
              color: #1890ff;
            }
            .introduce {
              color: #1890ff;
              /deep/.anticon {
                color: #1890ff;
              }
            }
          }
        }
      }

      .loader {
        height: 100%;
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 22;
        &.left-shift {
          left: 58%;
        }
      }

      /deep/.ant-empty {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .project-home-page {
      padding: 10px 170px 16px 170px;
      box-sizing: border-box;
      flex-shrink: 0;
      /deep/.vxe-pager {
        background: unset;
      }
    }

    .project-map-container {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      #map-container {
        height: 100%;
        width: 100%;
      }
    }

    .appear {
      padding-left: 320px;
      padding-right: 10px;
    }
  }
}
</style>

<style lang="less">
.amap-marker-label {
  border: 0;
  background: unset;
  white-space: pre-wrap;
  text-align: center;
}
.marker-label {
  width: 200px;
  box-shadow: 0px 1px 1px 0px rgba(51, 51, 51, 0.15);
  border-radius: 2px 2px 2px 2px;
  background: #fff;
  font-size: 14px;
  color: #333333;
  padding: 10px 20px;
  word-break: break-all;
}
</style>
